import React, { Component, PropTypes  }  from 'react';
import ReactDOM,{ render } from 'react-dom';
import { Meteor } from 'meteor/meteor';
import { createContainer } from 'meteor/react-meteor-data';
Meteor.startup(() =>{
	render(<Nav/>,document.querySelector('header'));
})
export class Home extends Component{
	render() {
		return <article>
		{i18n('store.purchase')}
		</article>
	}
}
export class Jqueryupload extends Component{
	componentDidMount() {
		Blaze.render(Template.upload_bootstrap,ReactDOM.findDOMNode(this.refs.upload));
	}
	render(){
		return <div ref="upload"></div>
	}
}
export class Summernote extends Component{
	componentDidMount() {
		Blaze.render(Template.summernote,ReactDOM.findDOMNode(this.refs.summernote));
	}
	render(){
		return <div ref="summernote"></div>		
	}
}
export class Nav extends Component {
	componentDidMount() {
		Blaze.render(Template.login,ReactDOM.findDOMNode(this.refs.login));
	}
	render(){
		return <nav className="navbar-collapse collapse">
			<ul className="nav navbar-nav">
				<li className="active"><a href="/">home</a> </li>
				<li><a href="/user">用户</a> </li>
				<li><a href="/jqueryupload">jqueryupload</a> </li>
				<li><a href="/summernote">Summernote</a> </li>
				<li><a href="/404">wuwei</a></li>
			</ul>
			<ul className="nav navbar-nav navbar-right" ref="login"></ul>
		</nav>		
	}
}
class User extends Component{/*mixins 抽离公共方法 state(构造函数中初始化组件自身状态) props(组件间数据传递) setState(快) setProps(慢)*/
	render() {
		console.log(this.props.currentUser)
  		if(this.props.currentUser===true)
			return <div>loging...</div>
		if(this.props.currentUser===undefined || this.props.currentUser===null)
			return <Login/> 
		return <div>{this.props.currentUser.emails[0].address}</div> 
	}
}
export default createContainer(() => {
  return {
    currentUser: Accounts.loggingIn() || Meteor.user(),
  };
}, User)
export class WuWei extends Component{
	render(){
		return <div>
			404 SOS Public welfare
		</div>
	}
} 
export class Login extends Component{
  	constructor() {
	    super();
		self=this
	    this.state = {
	      profile: {},
	    };
  	}
	componentDidMount(){
		document.querySelector('[type=range]').addEventListener('change',function(e){
			e.target.nextSibling.textContent=e.target.value
		})
		window.onbeforeunload =function ()	{
			return  "?";
		}
	}
	componentWillUnmount(){
		alert('Unmount?')	
	}
	login() {
		Meteor.loginWithPassword(self.state.email, self.state.password, function(er){
			if(er)console.log(er)
		})
	}
	createUser() {
		Accounts.createUser(self.state, function(er){
			if(er)console.log(er)
		})
	}
	userOpt(e){
		console.log(self)
		self.state[e.target.name]=e.target.value
	}
	userProfile(e){
		self.state.profile[e.target.name]=e.target.value
	}
	render() {
		return 	<section>
			<label >Email：</label>
			<input type="email" name="email" title='字母数字下划线@' onChange={this.userOpt} required/>
			<br />
			<label >Password： </label>
			<input type="password"  name="password" placeholder='care!!!' onChange={this.userOpt} required/>
			<br />
			<input type="button" value="login" onClick={this.login}/>忘记密码？
			<br />
			<fieldset onChange={this.userProfile}>
			<legend>注册时选填信息</legend>
			TEL:<input name="tel" type="tel" maxLength='11' /><br />
			BLOG:<input name="blog" type='url'/><br />
			Number:<input name="number" type='number' min='17' step='5'/><br />
			Age:<input name='range' type='range' min='17' max='190' step='3' defaultValue='101'/><label>101</label><br />
			Color:<input name="color" type='color' /><br />
			datetime-local:<input name="datetime-local" type='datetime-local' /><br />
			month:<input name="month" type='month' /><br />
			week:<input name="week" type='week' /><br />
			date:<input name="date" type='date' /><br />
			time:<input name="time" type='time' /><br />
			</fieldset>
			<input type="button" value="register" onClick={this.createUser}/>
		</section>
	}
}